<!DOCTYPE html>
<html lang="ZH">
<head>
<meta charset="UTF-8"/>
<title>spring boot + vue + elementui</title>
<link rel="stylesheet" href="//cdn.bootcss.com/element-ui/1.1.2/theme-default/index.css"/>
<script src="//cdn.bootcss.com/vue/2.1.8/vue.min.js"></script>
<script src="//cdn.bootcss.com/element-ui/1.1.2/index.js"></script>
<script src="//cdn.bootcss.com/vue-resource/1.0.3/vue-resource.min.js"></script>
</head>
<body>
	<div id="vm">
		<el-row :gutter="3" style="margin: 10px 0;"> 
			<el-col :span="5"> 
				<el-input placeholder="输入用户名称查询" v-model="name" icon="search" @change="changeUsername"></el-input> 
			</el-col> 
		</el-row>
		<el-table border fit :data="tableData" highlight-current-row style="width: 100%;font-size: 12px;"> 
			<el-table-column type="index" width="50"></el-table-column> 
			<el-table-column prop="name" label="用户名称"></el-table-column> 
			<el-table-column prop="age" label="年龄" :formatter="formatAge"></el-table-column> 
		</el-table>
		<el-col class="toolbar" style="padding:10px;"> 
			<el-pagination @current-change="findAll" :current-page="currentPage" :page-size="10"
				layout="total, prev, pager, next, jumper" :total="total" style="float:right">
			</el-pagination> 
		</el-col>
	</div>
</body>
<script>
	Vue.http.options.emulateJSON = true;
	Vue.http.options.emulateHTTP = true;
	var vm = new Vue({
		el: '#vm', 
		data: { 
			tableData: [], 
			currentPage: 1, 
			total: 10, 
			listLoading: false, 
			name: null
		}, 
		mounted: function () { 
			this.findAll(); 
		}, 
		methods: { 
			findAll: function (currentPage) { 
				this.listLoading = true;
				if (!isNaN(currentPage)) {
					this.currentPage = currentPage; 
				} 
				var params_ = { 
						pageNum: this.currentPage, pageSize: 10 
				};
				if (this.name && this.name.trim() != "") { 
					params_['name'] = this.name; 
				} 
				this.$http.get("/HelloSpringBoot/helloTable", {
					params: params_ 
				}).then(function (response) {
					console.log(response.data);
					this.total = response.data.count; 
					this.tableData = []; 
					for (var key in response.data.list) {
						this.$set(this.tableData, key, response.data.list[key]); 
					} 
				}).catch(function (response) {
					console.error(response); 
				}); 
				this.listLoading = false; 
			},		
			formatAge: function (row, column) {
				if (row.age != null) {
					//return row.sex == 1 ? '男' : '女'; 
					return row.age;
				} 
			}, 
			changeUsername: function () {
				this.findAll(1); 
				} 
			} 
		});
</script>
</html>